import React, { useEffect, useState } from 'react'
import { Button, message, Popconfirm, Space, Table } from 'antd';
import '../components.css'
import EmployeesService from '../../services/EmployeesService'
import { Link } from 'react-router-dom';
import { DeleteOutlined, UpCircleOutlined } from '@ant-design/icons';
// import { useState } from 'react';

export default function EmployeeList() {

  const [employees, setEmployees] = useState([])
  const getAllEmployees = () => {
    EmployeesService.getAllEmployees().then((response) => {
      setEmployees(response.data);
    }).catch(error => {
      console.log(error);
    })
  }
  useEffect(() => {
    getAllEmployees();
  }, [])

  const deleteEmployee = (e) => {
    console.log(e);
    message.success('Delete Success!');
    setTimeout(() => {
      EmployeesService.deleteEmployee(e).then(response => {
        getAllEmployees();
      }).catch(error => {
        console.log(error);
      })
    }, 500);
  }
  const cancel = (e) => {
    console.log(e);
    message.error('Delete Failed!');
  };


  const columns = [
    {
      title: 'Employee Id',
      dataIndex: 'employeeId',
      key: 'employeeId',
      //内容的对其方式
      align: 'center'
    },
    {
      title: 'Employee Name',
      dataIndex: 'employeeName',
      key: 'employeeName',
      //内容的对其方式
      align: 'center'

    },

    {
      title: 'Employee Age',
      dataIndex: 'employeeAge',
      key: 'employeeAge',
      //内容的对其方式
      align: 'center'

    },
    {
      title: 'Employee Phone',
      dataIndex: 'employeePhone',
      key: 'employeePhone',
      //内容的对其方式
      align: 'center'
    },
    {
      title: 'Employee Job',
      dataIndex: 'employeeJob',
      key: 'employeeJob',
      //内容的对其方式
      align: 'center'

    },

    {
      title: 'Employee Gender',
      dataIndex: 'employeeGender',
      key: 'employeeGender',
      //内容的对其方式
      align: 'center'

    },

    {
      title: 'Employee Adress',
      dataIndex: 'employeeAddress',
      key: 'employeeAddress',
      //内容的对其方式
      align: 'center'

    },



    {
      title: 'Action',
      key: 'action',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <Button type='primary' icon={<UpCircleOutlined />} >
            <Link to={"updateemployee/" + record.key} style={{ color: "white", paddingLeft: "9px" }}>Update</Link>
          </Button>

          <Popconfirm
            title="Are you sure to delete?"
          
            onConfirm={() => deleteEmployee(record.key)}
            

            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button type='danger' icon={<DeleteOutlined />}>Delete</Button>
          </Popconfirm>
        </Space>

      ),
    },
  ];

  const data = employees.map((employee) => {
    return {
      key: employee.id,
      employeeId: employee.id,
      employeeName: employee.employeeName,
      employeePhone: employee.employeePhone,
      employeeAddress: employee.employeeAddress,
      employeeGender: employee.employeeGender,
      employeeJob: employee.employeeJob,
      employeeAge: employee.employeeAge,
    }
  })
   

  return (
    <div className='emplst'>
      <div className="title" style={{ paddingBottom: '30px' }}>Employee List </div>
      <Table columns={columns} dataSource={data} bordered={true} />
    </div>)
}

